<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>成长历程</title>
    <style>
    	*{
    		margin: 0;
    		padding: 0;
    		list-style: none;
            text-decoration: none;
    	}
        a{
            text-decoration: none;
        }
    	.p1 img{
    		width: 100%;
    		height: 15rem;
    		position: absolute;
    		/*background: red;*/

    	}
    	.tm1,.tm2,.tm3,.tm4{
    		width: 100%;
    		height: 15rem;
    		background: #000;
    		filter:alpha(opacity=70);
    		position: absolute;  
		    -moz-opacity:0.7;  
		    -khtml-opacity: 0.7;  
		    opacity: 0.7;  
		    display: block;
    		
    	}
    	
    	.p4{
    		width:6rem;
    		border-bottom: 1px solid #d4d4d4;;
    	}
    	
    	ul li{
    		height: 15rem;
    		margin-bottom: 1rem;
            text-decoration: none;
    	}
    	.footer{
    		/*border:1px solid red;*/
    		text-align: center;
    		margin-left: 6.5rem;
    		display: flex;
    		align-items: center;
    		/*line-height: ;*/
    		padding-bottom: 1rem;
    		color: #d4d4d4;
    	}
    	.footer .p6{
    		font-size: 1.1rem;
    		
    		padding:  0 1.1rem;
            
    	}
    	.p4{
    		width:6rem;
    		border-bottom: 1px solid #d4d4d4;
    		/*padding-right: 1rem;*/
    	}
         .p5{
    		width:6rem;
    		border-bottom: 1px solid #d4d4d4;
    	}
    	.box4 .p2 img,.box6 .p2 img,.box7 .p2 img{
    		width:6.6rem;
    		height:6.6rem;
    		
        }
        .box4 .p2,.box5 .p2,.box6 .p2,.box7 .p2,.box8 .p2{
        	position: relative;
    		left: 50%;
    		top: 50%;
    		z-index: 2;
    		width:6.6rem;
    		margin-left: -3.1rem;
    		/*margin-top: 2.5rem;*/
    		padding-top: 2.5rem;
        	}
        .box4 .p3,.box8 .p3,.box5 .p3,.box6 .p3,.box7 .p3{
        		width: 6.6rem;
        		height:1.6rem ;
        		line-height: 1.6rem;
	    		font-weight: 900;
	    		font-size: 1.6rem;
	    		letter-spacing:0.3rem;
	    		color: #fff;
	    		border-left: 0.4rem solid #FFFFFF;
	    		/*height: 1.6rem;*/
	    		position: relative;
	    		left: 50%;
	    		top: 50%;
	    		margin-left:-3.3rem ;
	    		padding-left:0.6rem ;
	    		margin-top: 0.6rem;
	    		z-index: 2;
                text-decoration: none;
	    		/*border:1px solid red;*/
            }
            .box6 .p3,.box7 .p3{
            	width: 4rem;
            	text-align: center;
                text-decoration: none;
            	/*margin-left:0.2rem ;*/
            	}
         .box6 .d5,.box7 .d6{
         	margin-left: 2rem;
         }
        .box4,.box5,.box6,.box7{
        	width:6.6rem;
        	text-align: center;
        	/*border: 1px solid red;*/
        	z-index: 3;
        	margin: 0 auto;
	        /*border:1px solid red;*/
        	
    		}
    	.pimg{
			width:6.6rem;
		    height:4.5rem;
		    margin-top: 1.5rem;
    		}
    		.toColor{
    			display: none;
    			
    		}
    </style>
    <script type="text/javascript">
    	
   		document.addEventListener('plusready', function(){
   			//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"
   			
   		});
   		
    </script>
</head>
<body>
	<div >
		<ul id="ul">
			<li class="li1">
                <a href="<?php echo SITE_PATH ?>work/bpost/jiaxiao">
                    <p class="p1"><img src="<?php echo IMG_PATH ?>bdkd/img1/s@2x.png"/></p>
                    <p class="tm1"></p>
                    <div class="box4">
                        <p class="p2"><img src="<?php echo IMG_PATH ?>bdkd/img1/car@2x@2x(1).png" /></p>
                        <p class="p3">报驾校</p>
                    </div>
                </a>

			</li>

			<!--<li class="li2">
				<p class="p1"><img src="<?php /*echo IMG_PATH */?>bdkd/img1/500220087@2x.png"/></p>
				<p class="tm2"></p>
				<div class="box5">
				<p class="p2"><img src="<?php /*echo IMG_PATH */?>bdkd/img1/辅导班@2x@2x@2x.png" class="pimg"/></p>
				<p class="p3">辅导班</p></div>
			</li>-->
			<!--<li class="li3">
				<p class="p1"><img src="<?php /*echo IMG_PATH */?>bdkd/img1/ke@2x.png"/></p>
				<p class="tm3"></p>
				<div class="box6">
				<p class="p2"><img src="<?php /*echo IMG_PATH */?>bdkd/img1/birthday@2x@2x(1).png"/></p>

				<div class="d5"><p class="p3">生日</p></div></div>
			</li>-->
            <!--<li class="li4">
                <a href="<?php /*echo SITE_PATH */?>work/bpost/jiek">
                    <p class="p1"><img src="<?php /*echo IMG_PATH */?>bdkd/img/money.png"/></p>
                    <p class="tm4"></p>
                    <div class="box7">
                        <p class="p2"><img src="<?php /*echo IMG_PATH */?>bdkd/img/tp.png"/></p>
                        <div class="d6"><p class="p3">借款</p></div></div>
                </a>

            </li>
			<li class="li4">
                <a href="<?php /*echo SITE_PATH */?>work/bpost/licai">
                    <p class="p1"><img src="<?php /*echo IMG_PATH */?>bdkd/img1/500493641@2x.png"/></p>
                    <p class="tm4"></p>
                    <div class="box7">
                        <p class="p2"><img src="<?php /*echo IMG_PATH */?>bdkd/img1/money@2x@2x(1).png"/></p>
                        <div class="d6"><p class="p3">理财</p></div></div>
                </a>

			</li>-->
		</ul>
		</div>
		<div class="footer" style="margin-left:0;display: flex;justify-content: center">
			<p class="p4"></p>
		    <p class="p6" style="">成长的烦恼就是这么多</p>
			<p class="p5"></p>
		</div>
	
</body>
<script src="js/jquery-1.11.1.min.js"></script>
<script>
	(function(win, doc) {
		win.onresize = function() {
			change();
		};
		change();

		function change() {
			var oFs = doc.documentElement.clientWidth / (768 / 20);
			doc.documentElement.style.fontSize = oFs + 'px';
		}
	})(window, document);
	
	
//	 window.onload=function(){
//      var lis=document.getElementById("ul").getElementsByTagName("li");
//      for(var i=0;i<lis.length;i++){
//          lis[i].setAttribute("index",i);
//          lis[i].onclick=function(){
//              for(var i=0;i<lis.length;i++){
//                  if(this.getAttribute("index")==i){
//                      lis[i].style.opacity=0;
//                  }else{
//                      lis[i].style.opacity=70;
//                  }
//              }
//          }
//      }
//  }

//  $("#ul>li").click(function(){
//  $(this).toggleClass(function(){
//         //rgb(204, 204, 204)==#ccc
//         if( $(this).css("display")=="none"){
//            $(this).css("display")=="block");
//         }else{
//            $(this).css("display")=="block");
//         }
//  });
//});
			
	$('.li1').click(function(){
		if($(".tm1").css("display")=="block"){
			$(".tm1").hide();
//			$(".tm2").hide();
            $(".tm2").show();
			$(".tm3").show();
			$(".tm4").show();
			}else{
			$(".tm2").show();
			$(".tm3").show();
			$(".tm4").show();
			}
	})
	$('.li2').click(function(){
		if($(".tm2").css("display")=="block"){
			$(".tm2").hide();
			$(".tm1").show();
			$(".tm3").show();
			$(".tm4").show();
//			$(".tm2").hide();
			}else{
			$(".tm1").show();
			$(".tm3").show();
			$(".tm4").show();
			}
	})
	$('.li3').click(function(){
		if($(".tm3").css("display")=="block"){
			$(".tm3").hide();
			$(".tm2").show();
			$(".tm1").show();
			$(".tm4").show();
		}else{
			$(".tm2").show();
			$(".tm1").show();
			$(".tm4").show();
			}
	})
	$('.li4').click(function(){
		if($(".tm4").css("display")=="block"){
			$(".tm4").hide();
			$(".tm2").show();
			$(".tm1").show();
			$(".tm3").show();
		}else{
			$(".tm2").show();
			$(".tm1").show();
			$(".tm3").show();
			}
	})

</script>
</html>